<template>
  <div>
    <a-row>
      <a-col :span="24">
        <span>客户订单：</span>
        <a-input style="width: auto" v-model:value="userOrderId" placeholder="请输入客户订单号" />
        <a-button type="primary" style="margin-left: 10px" :loading="loading" @click="handleImport">导入</a-button>
      </a-col>
    </a-row>
    <a-divider />
    <h2 style="font-weight: bold">原始订单</h2>
    <span>下单时间：{{orderTime}}</span>
    <common-table :pagination="false" style="margin-top:10px" :columns="columns" bordered :data-source="dataSource" />
    <a-divider />
    <h2 style="font-weight: bold">客户地址</h2>
    <a-divider v-if="orderInfo" />
    <a-descriptions title="客户地址" :column="1" v-if="orderInfo">
      <a-descriptions-item label="收件人">
        {{ orderInfo?.userAddress?.contactName }} / {{ orderInfo?.userAddress?.contactEmail }} /
        {{ orderInfo?.userAddress?.contactPhone }}
      </a-descriptions-item>
      <a-descriptions-item label="地址">
        {{ orderInfo?.userAddress?.addressLine1 }} , {{ orderInfo?.userAddress?.cityName }} ,
        {{ orderInfo?.userAddress?.stateCode }} {{ orderInfo?.userAddress?.zipCode }}
      </a-descriptions-item>
    </a-descriptions>
    <common-table :slots="['productSku','warehouseSku','specification']"
                  :pagination="false"
                  style="margin-top:10px"
                  :row-key="(record) =>record.saleOrderCode"
                  :scroll="{ x: 'max-content'}"
                  :columns="saleColumns" bordered
                  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                  :data-source="orderDetails">
      <template #productSku="{ record }">
        <div v-for="(item, index) in record.productSku" :key="index">{{ item.productSku }} * {{ item.productSkuQty }}</div>
      </template>
      <template #warehouseSku="{record}">
          <div v-for="(item, index) in record.warehouseSku" :key="index">
            {{ item.warehouseSku }} * {{ item.warehouseSkuQty }}
          </div>
        </template>
      <template #specification="{record}">
          <div v-for="(item, index) in record.specification" :key="index">
            {{ item.deliveryType }} / {{ item.length }} * {{ item.width }} * {{ item.height }} cm / {{ item.weight }} kg
            / $ {{ item.estimatePrice }}
          </div>
      </template>
    </common-table>
    <div style="margin-top: 10px;float: right">
      <a-button type="primary" style="margin-right: 10px" @click="$router.push('/tail/truckDelivery')">取消</a-button>
      <a-button type="primary"  :loading="handleLoading" :disabled="isDisabled" @click="confirm">确定</a-button>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import {message} from "ant-design-vue";
import { useRouter } from 'vue-router'
const router = useRouter()
import commonTable from '@/components/commonTable/index.vue'
import {createByEccangOrder, getOrderSkuList, loadEccangOrder} from "@/api/tail/singleImport.js";
const userOrderId = ref('')
const selectedRowKeys = ref([])
const orderTime = ref('')
const loading = ref(false);
const handleLoading = ref(false);
const isDisabled = ref(false);
const columns = [
  {
    title: '平台SKU',
    align: 'center',
    dataIndex: 'sku'
  },
  {
    title: '数量',
    align: 'center',
    dataIndex: 'qty_ordered'
  },
  {
    title: '结算金额',
    align: 'center',
    dataIndex: 'row_grand'
  },
  {
    title: '邮费',
    align: 'center',
    dataIndex: 'delivery_amount'
  },
  {
    title: '履约时间',
    align: 'center',
    dataIndex: 'delivery_time'
  }
]
const saleColumns = [
  {
    title: '物流单',
    align: 'center',
    dataIndex: 'saleOrderCode',
  },
  {
    title: '状态',
    align: 'center',
    dataIndex: 'status',
  },
  {
    title: '仓库',
    align: 'center',
    dataIndex: 'warehouse',
  },
  {
    title: '客服备注',
    align: 'center',
    dataIndex: 'customerServiceNote',
  },
  {
    title: '配送类型',
    align: 'center',
    dataIndex: 'shippingMethod',
  },
  {
    title: '跟踪号',
    align: 'center',
    dataIndex: 'shippingMethodNo',
  },
  {
    title: '平台SKU',
    align: 'center',
    dataIndex: 'productSku',
  },
  {
    title: '仓库SKU',
    align: 'center',
    dataIndex: 'warehouseSku',
  },
  {
    title: '单件规格',
    align: 'center',
    dataIndex: 'specification',
  },
]
const userAddress = ref({})
const dataSource = ref([])
const orderInfo = ref({})
const orderDetails = ref([])
const handleImport = async () => {
  try{
    loading.value = true;
    const res = await getOrderSkuList({
      order_id:userOrderId.value
    })
    dataSource.value = res.result.records
    const res1 = await loadEccangOrder({
      userOrderId: userOrderId.value
    })
    userAddress.value = res1.result.userAddress
    orderTime.value = res1.result.orderTime
    orderInfo.value = res1.result
    orderDetails.value = orderInfo.value.saleOrderList.map(item => {
      return {
        saleOrderCode: item.saleOrderCode,
        status: item.status + '/' + item.statusName,
        warehouse: item.warehouseCode + '/' + item.warehouseName,
        customerServiceNote: item.customerServiceNote,
        shippingMethod: item.shippingMethod,
        shippingMethodNo: item.shippingMethodNo,
        productSku: item.orderDetails,
        warehouseSku: item.orderDetails,
        specification: item.orderDetails
      }
    })
  }catch (e){
    message.error(e)
  }finally {
    loading.value = false
  }
}
const confirm = async () => {
  try{
    handleLoading.value = true;
    const res = await createByEccangOrder({
      userOrderId: userOrderId.value,
      saleOrderList:selectedRowKeys.value,
    })
    await router.push({path: '/tail/truckDeliver/form', query: {id: res.result.truckOrderId}})
  }catch (e){
    message.error(e)
  }finally {
    handleLoading.value = false
  }
}
const onSelectChange = (e) => {
  if (e.length > 1) {
    const selectedOne = e[0]
    const warehouse = selectedOne['warehouse']
    for (let i = 1; i < e.length; i++) {
      if (e[i]['warehouse'] !== warehouse) {
        message.error('不能同时从多仓发出卡派')
        isDisabled.value = true
      } else {
        isDisabled.value = false
      }
    }
  }
  selectedRowKeys.value = e
}
</script>
<style scoped>

</style>
